import React, { useState } from "react";
import { LayoutAnimation, Platform, StyleSheet, Text, TouchableOpacity, UIManager, View } from "react-native";
import DescTextCom from '../../../components/DescText'
if (
    Platform.OS === "android" &&
    UIManager.setLayoutAnimationEnabledExperimental
) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
}
const App = () => {
    const [expanded, setExpanded] = useState(false);

    return (
        <View style={style.container}>
            <DescTextCom>用来控制键盘相关的事件</DescTextCom>
            <TouchableOpacity
                onPress={() => {
                    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
                    setExpanded(!expanded);
                }}
            >
                <Text>Press me to {expanded ? "collapse" : "expand"}!</Text>
            </TouchableOpacity>
            {expanded && (
                <View style={style.tile}>
                    <Text>I disappear sometimes!</Text>
                </View>
            )}
        </View>
    );
};

const style = StyleSheet.create({
    tile: {
        background: "lightGrey",
        borderWidth: 0.5,
        borderColor: "#d6d7da"
    },
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        overflow: "hidden"
    }
});

export default App;